import 'package:flutter/material.dart';
import 'dart:math' as math;

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter 布局与装饰',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const LayoutDemoPage(),
    );
  }
}

class LayoutDemoPage extends StatelessWidget {
  const LayoutDemoPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('布局与装饰综合示例'),
      ),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // 1. Padding 示例
            const Text(
              '1. Padding 示例',
              style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
            ),
            const SizedBox(height: 10),
            _buildPaddingExample(),
            const Divider(height: 30),
            
            // 2. DecoratedBox 示例
            const Text(
              '2. DecoratedBox 示例',
              style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
            ),
            const SizedBox(height: 10),
            _buildDecoratedBoxExample(),
            const Divider(height: 30),
            
            // 3. Transform 示例
            const Text(
              '3. Transform 示例',
              style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
            ),
            const SizedBox(height: 10),
            _buildTransformExample(),
            const Divider(height: 30),
            
            // 4. Container 综合示例
            const Text(
              '4. Container 综合示例',
              style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
            ),
            const SizedBox(height: 10),
            _buildContainerExample(),
          ],
        ),
      ),
    );
  }

  Widget _buildPaddingExample() {
    return Container(
      color: Colors.grey[200],
      padding: const EdgeInsets.all(8.0),
      child: const Padding(
        padding: EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisSize: MainAxisSize.min,
          children: [
            Padding(
              padding: EdgeInsets.only(left: 8.0),
              child: Text("左侧8像素内边距"),
            ),
            Padding(
              padding: EdgeInsets.symmetric(vertical: 8.0),
              child: Text("上下各8像素内边距"),
            ),
            Padding(
              padding: EdgeInsets.fromLTRB(20, 0, 20, 10),
              child: Text("左20右20下10像素内边距"),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildDecoratedBoxExample() {
    return Column(
      children: [
        // 简单装饰
        DecoratedBox(
          decoration: BoxDecoration(
            color: Colors.blue,
            borderRadius: BorderRadius.circular(8.0),
          ),
          child: const Padding(
            padding: EdgeInsets.all(12.0),
            child: Text(
              "带圆角的蓝色背景",
              style: TextStyle(color: Colors.white),
            ),
          ),
        ),
        const SizedBox(height: 15),
        
        // 复杂装饰
        DecoratedBox(
          decoration: BoxDecoration(
            gradient: const LinearGradient(
              colors: [Colors.purple, Colors.blue],
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
            ),
            borderRadius: BorderRadius.circular(10.0),
            boxShadow: [
              BoxShadow(
                color: Colors.black.withOpacity(0.3),
                offset: const Offset(3.0, 3.0),
                blurRadius: 6.0,
              ),
            ],
          ),
          child: const Padding(
            padding: EdgeInsets.symmetric(horizontal: 40.0, vertical: 15.0),
            child: Text(
              "渐变背景+阴影",
              style: TextStyle(color: Colors.white, fontSize: 16),
            ),
          ),
        ),
      ],
    );
  }

  Widget _buildTransformExample() {
    return Column(
      children: [
        // 平移
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            DecoratedBox(
              decoration: BoxDecoration(color: Colors.green[200]),
              child: Transform.translate(
                offset: const Offset(-20.0, -5.0),
                child: const Text("平移效果"),
              ),
            ),
            const SizedBox(width: 20),
            const Text("原始位置"),
          ],
        ),
        const SizedBox(height: 20),
        
        // 旋转
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            DecoratedBox(
              decoration: BoxDecoration(color: Colors.red[200]),
              child: Transform.rotate(
                angle: math.pi / 4, // 45度
                child: const Padding(
                  padding: EdgeInsets.all(8.0),
                  child: Text("旋转45度"),
                ),
              ),
            ),
            const SizedBox(width: 20),
            const RotatedBox(
              quarterTurns: 1, // 90度
              child: Text("RotatedBox旋转"),
            ),
          ],
        ),
        const SizedBox(height: 20),
        
        // 缩放
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            DecoratedBox(
              decoration: BoxDecoration(color: Colors.blue[200]),
              child: Transform.scale(
                scale: 1.5,
                child: const Padding(
                  padding: EdgeInsets.all(8.0),
                  child: Text("放大1.5倍"),
                ),
              ),
            ),
            const SizedBox(width: 20),
            const Text("正常大小"),
          ],
        ),
      ],
    );
  }

  Widget _buildContainerExample() {
    return Column(
      children: [
        // 简单Container
        Container(
          margin: const EdgeInsets.only(bottom: 15.0),
          padding: const EdgeInsets.all(12.0),
          color: Colors.amber[100],
          child: const Text("简单的Container，带内边距和背景色"),
        ),
        
        // 复杂Container
        Container(
          margin: const EdgeInsets.symmetric(vertical: 20.0),
          constraints: BoxConstraints.tightFor(width: 250, height: 150),
          decoration: BoxDecoration(
            gradient: const LinearGradient(
              colors: [Colors.blue, Colors.lightBlueAccent],
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
            ),
            borderRadius: BorderRadius.circular(15.0),
            boxShadow: [
              BoxShadow(
                color: Colors.black.withOpacity(0.2),
                offset: const Offset(4.0, 4.0),
                blurRadius: 8.0,
              ),
            ],
          ),
          transform: Matrix4.rotationZ(-0.1),
          alignment: Alignment.center,
          child: const Text(
            "综合示例",
            style: TextStyle(
              color: Colors.white,
              fontSize: 24,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
        
        // 带边框的Container
        Container(
          margin: const EdgeInsets.only(top: 15.0),
          padding: const EdgeInsets.all(16.0),
          decoration: BoxDecoration(
            color: Colors.white,
            border: Border.all(
              color: Colors.blue,
              width: 2.0,
            ),
            borderRadius: BorderRadius.circular(8.0),
          ),
          child: const Text(
            "带边框和圆角的Container",
            style: TextStyle(color: Colors.blue),
          ),
        ),
      ],
    );
  }
}